<template>
  <el-aside width="300px" class="right-box">
    <div class="cap-wrapper">组件属性</div>
    <el-scrollbar class="aside-scrollbar">
      <el-form size="small" label-width="80px" labelPosition="left">
        <template v-if="activeData">
          <el-form-item v-if="activeData.title !== undefined" label="标题">
            <el-input v-model="activeData.title" placeholder="请输入标题" />
          </el-form-item>
          <template v-if="activeData.keyName === 'searchModel'">
            <div v-for="(item, index) in activeData.searchList" :key="index">
              <p>搜索条件{{ index + 1 }}</p>
              <el-form-item label="类型">
                <el-select v-model="item.searchType" placeholder="请选择">
                  <el-option
                    v-for="item in searchOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名称">
                <el-input
                  v-model="item.searchName"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="字段">
                <el-input
                  v-model="item.searchField"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item v-if="item.searchType == 'select'" label="code">
                <el-input
                  v-model="item.selectCode"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </div>
            <div class="mt-10">
              <el-button @click="addSearchCondition" icon="el-icon-plus">
                添加搜索条件
              </el-button>
            </div>
          </template>
          <template v-if="activeData.keyName === 'commonFunc'">
            <el-divider>选项</el-divider>
            <div
              v-for="(item, index) in activeData.list"
              :key="index"
              class="select-item"
            >
              <tree-select
                :options="menuList"
                v-model="item.id"
                placeholder="请选择菜单"
                lastLevel
                clearable
                @change="getSelectValue(arguments, index)"
              >
              </tree-select>
              <div
                class="close-btn select-line-icon"
                @click="delSelectItem(index)"
              >
                <i class="el-icon-remove-outline" />
              </div>
            </div>
            <div class="mt-10">
              <el-button
                icon="el-icon-plus"
                @click="addSelectItem"
                v-if="activeData.list.length < 10"
                >添加选项</el-button
              >
            </div>
          </template>
          <template v-if="activeData.jnpfKey === 'backlog'">
            <div class="dataBoard-item">
              <!-- <el-form-item label="接口信息">
                <el-input
                  v-model="activeData.bisList[0].port"
                  placeholder="请输入接口"
                />
              </el-form-item> -->
              <el-form-item label="数据类型">
                <el-radio-group v-model="activeData.dataType">
                  <el-radio-button label="static">静态数据</el-radio-button>
                  <el-radio-button label="dynamic">远端数据</el-radio-button>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="远端数据"
                v-if="activeData.dataType === 'dynamic'"
              >
                <JsbosTreeSelect
                  :options="dataInterfaceOptions"
                  v-model="activeData.propsApi"
                  placeholder="请选择数据接口"
                  lastLevel
                  lastLevelKey="categoryId"
                  lastLevelValue="1"
                  clearable
                />
              </el-form-item>
              <div
                style="margin-top: 15px"
                v-if="activeData.dataType === 'static'"
              >
                <el-input
                  placeholder="请输入内容"
                  v-model="activeData.bisList[0].port"
                  class="input-with-select"
                  size="mini"
                >
                  <el-select
                    v-model="activeData.selectValue"
                    slot="prepend"
                    placeholder="请选择"
                    style="min-width: 100px; font-size: 12px"
                  >
                    <el-option label="公告" value="notice"></el-option>
                    <el-option label="未读邮箱" value="unread"></el-option>
                    <el-option label="待办事项" value="todo"></el-option>
                  </el-select>
                </el-input>
              </div>
            </div>
          </template>
          <template v-if="activeData.keyName === 'dataBoard'">
            <div
              v-for="(item, index) in activeData.list"
              :key="index"
              class="dataBoard-item"
            >
              <p class="head">
                <span>选项{{ index + 1 }}</span>
                <a
                  class="head-icon el-icon-close"
                  @click="delDataBoardItem(index)"
                ></a>
              </p>
              <el-form-item label="标题">
                <el-input v-model="item.fullName" placeholder="请输入标题" />
              </el-form-item>
              <el-form-item label="数据类型">
                <el-radio-group v-model="item.dataType">
                  <el-radio-button label="static">静态数据</el-radio-button>
                  <el-radio-button label="dynamic">远端数据</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="数据接口" v-if="item.dataType === 'dynamic'">
                <tree-select
                  :options="dataInterfaceOptions"
                  v-model="item.propsApi"
                  placeholder="请选择数据接口"
                  lastLevel
                  lastLevelKey="categoryId"
                  lastLevelValue="1"
                  clearable
                />
              </el-form-item>
              <el-form-item label="数值" v-if="item.dataType === 'static'">
                <el-input v-model="item.num" placeholder="请输入数值" />
              </el-form-item>
              <el-form-item label="图标">
                <el-input v-model="item.icon" placeholder="请输入图标名称">
                  <el-button slot="append" @click="openIconsDialog(index)">
                    选择</el-button
                  >
                </el-input>
              </el-form-item>
              <el-form-item label="颜色">
                <el-color-picker
                  v-model="item.color"
                  :predefine="[
                    '#188ae2',
                    '#35b8e0',
                    '#26bf8c',
                    '#f9c851',
                    '#ff5b5b',
                    '#5b69bc',
                    '#ff8acc',
                    '#3b3e47',
                    '#282828',
                  ]"
                />
              </el-form-item>
              <el-divider></el-divider>
            </div>
            <el-button
              icon="el-icon-plus"
              @click="addDataBoardItem"
              v-if="activeData.list.length < 6"
              >添加选项</el-button
            >
          </template>
          <template v-if="activeData.keyName === 'DataPanel'">
            <div style="margin-bottom: 15px">
              <el-radio v-model="activeData.styleClass" label="1"
                >样式1</el-radio
              >
              <el-radio v-model="activeData.styleClass" label="2"
                >样式2</el-radio
              >
              <el-radio v-model="activeData.styleClass" label="3"
                >样式3</el-radio
              >
            </div>
            <DataSource
              :value="activeData"
              :typeList="['static', 'dynamic', 'service']"
              :isShowDataHandle="false"
            ></DataSource>
            <!-- <el-form-item label="数据集合">
              <el-switch v-model="activeData.isDataSet"> </el-switch>
            </el-form-item>
            <template v-if="activeData.isDataSet">
              <el-form-item label="" class="custom_url_style">
                <el-input
                  placeholder="请输入接口地址"
                  v-model="activeData.interfaceUrl"
                  class="input-with-select"
                >
                  <el-select
                    style="width: 80px"
                    v-model="activeData.customUrlPostType"
                    slot="prepend"
                    placeholder="请选择"
                  >
                    <el-option label="GET" value="GET"></el-option>
                    <el-option label="POST" value="POST"></el-option>
                  </el-select>
                  <el-button slot="append" @click="postField">请求</el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="请求参数">
                <el-input
                  v-model="activeData.requestParam"
                  @focus="requestFocus"
                  ref="requestParam"
                  placeholder="请输入"
                />
              </el-form-item>
            </template> -->
            <div
              v-for="(item, index) in activeData.list"
              :key="index"
              class="dataBoard-item"
            >
              <p class="head">
                <span>选项{{ index + 1 }}</span>
                <a
                  class="head-icon el-icon-close"
                  @click="delDataBoardItem(index)"
                ></a>
              </p>
              <el-form-item label="标题">
                <el-input v-model="item.fullName" placeholder="请输入标题" />
              </el-form-item>

              <!-- <el-form-item label="数据类型" v-if="!activeData.isDataSet">
                <el-radio-group v-model="item.dataType">
                  <el-radio-button label="static">静态数据</el-radio-button>
                  <el-radio-button label="dynamic">远端数据</el-radio-button>
                </el-radio-group>
              </el-form-item> -->
              <!-- <el-form-item
                label="数据接口"
                v-if="activeData.dataType === 'dynamic'"
              >
                <tree-select
                  :options="dataInterfaceOptions"
                  v-model="item.propsApi"
                  placeholder="请选择数据接口"
                  lastLevel
                  lastLevelKey="categoryId"
                  lastLevelValue="1"
                  clearable
                />
              </el-form-item> -->
              <el-form-item label="数值" v-if="activeData.dataType == 'static'">
                <el-input v-model="item.num" placeholder="请输入数值" />
              </el-form-item>
              <el-form-item label="字段" v-if="activeData.dataType != 'static'">
                <el-input v-model="item.field" placeholder="请输入数值" />
              </el-form-item>
              <el-form-item
                label="单位"
                v-if="
                  activeData.styleClass == '2' || activeData.styleClass == '3'
                "
              >
                <el-input v-model="item.unit" placeholder="请输入单位" />
              </el-form-item>
              <el-divider></el-divider>
            </div>
            <el-button
              icon="el-icon-plus"
              @click="addDataBoardItem"
              v-if="activeData.list.length < 6"
              >添加选项</el-button
            >
          </template>
          <!-- 新版消息公告 -->
          <template v-if="activeData.keyName === 'newNotice'">
            <!-- <el-form-item label="标题">
                <el-input v-model="activeData.fullName" placeholder="请输入标题" />
              </el-form-item> -->

            <el-form-item label="数据类型">
              <el-radio-group v-model="activeData.dataType">
                <el-radio-button label="static">静态数据</el-radio-button>
                <el-radio-button label="dynamic">远端数据</el-radio-button>
              </el-radio-group>
              <el-form-item label="数据设置" v-if="value.dataType === 'static'">
                <el-button @click="showData(value.option)">查看</el-button>
              </el-form-item>
            </el-form-item>
            <el-form-item
              label="数据接口"
              v-if="activeData.dataType === 'dynamic'"
            >
              <JsbosTreeSelect
                :options="dataInterfaceOptions"
                v-model="activeData.propsApi"
                placeholder="请选择数据接口"
                lastLevel
                lastLevelKey="categoryId"
                lastLevelValue="1"
                clearable
              />
            </el-form-item>
            <el-form-item
              label="数据接口"
              v-if="activeData.dataType === 'static'"
            >
              <el-input
                placeholder="请输入内容"
                v-model="activeData.port"
                class="input-with-select"
                size="mini"
              >
                <el-select
                  v-model="activeData.selectValue"
                  slot="prepend"
                  placeholder="请选择"
                  @change="changeTabsListNew()"
                  style="min-width: 100px; font-size: 12px"
                >
                  <el-option label="公告" value="announcement"></el-option>
                  <el-option label="未读邮件" value="email"></el-option>
                  <el-option label="待办事项" value="flowTodo"></el-option>
                  <!-- <el-option label="站内消息" value="message"></el-option>
                  <el-option
                    label="最新公告"
                    value="latestAnnouncement"
                  ></el-option> -->
                </el-select>
              </el-input>
              <!-- <el-input v-model="activeData.staticPropsApi" placeholder="请输入数据接口" /> -->
            </el-form-item>
          </template>
          <!-- 模块管理 -->
          <template v-if="activeData.keyName === 'functionModule'">
            <div class="">
              <el-form-item label="类型">
                <el-radio v-model="activeData.listType" label="1"
                  >普通列表</el-radio
                >
                <el-radio v-model="activeData.listType" label="2"
                  >排行列表</el-radio
                >
              </el-form-item>

              <div>
                <DataSource
                  :value="activeData"
                  :typeList="['service']"
                  :isShowDataHandle="false"
                  :api="'apiUrl'"
                  :paramsFild="'params'"
                ></DataSource>
                <!-- <p>数据接口</p>
                <el-form-item label="" class="custom_url_style">
                  <el-input
                    placeholder="请输入接口地址"
                    v-model="activeData.apiUrl"
                    class="input-with-select"
                  >
                    <el-select
                      style="width: 80px"
                      v-model="activeData.customUrlPostType"
                      slot="prepend"
                      placeholder="请选择"
                    >
                      <el-option label="GET" value="GET"></el-option>
                      <el-option label="POST" value="POST"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
                <el-input
                  style="margin-top: 5px"
                  v-model="activeData.params"
                  placeholder="请输入请求参数"
                  type="textarea"
                ></el-input> -->
                <el-input
                  style=""
                  v-model="activeData.jumpUrl"
                  placeholder="请输入跳转地址"
                ></el-input>
              </div>

              <div style="margin-top: 20px">
                <p>自定义表头</p>
                <div class="meter_header">
                  <table>
                    <tr>
                      <td>表头名</td>
                      <td>key</td>
                      <td>宽度(%)</td>
                      <td style="width: 50px; text-align: center">操作</td>
                    </tr>
                    <tr v-for="(o, i) in activeData.meterHeader" :key="i">
                      <td>
                        <el-input
                          v-model="o.nameValue"
                          placeholder="请输入"
                        ></el-input>
                      </td>
                      <td>
                        <el-input
                          v-model="o.keyValue"
                          placeholder="请输入"
                        ></el-input>
                      </td>
                      <td>
                        <el-input
                          type="number"
                          v-model="o.width"
                          placeholder="请输入"
                        ></el-input>
                      </td>
                      <td class="table_del">
                        <i class="el-icon-delete" @click="delTable(i)"></i>
                      </td>
                    </tr>
                  </table>
                </div>
                <div class="mt-10">
                  <el-button @click="addMeterHeader" icon="el-icon-plus">
                    添加选项
                  </el-button>
                </div>
              </div>

              <div style="margin-top: 20px">
                <p>定制枚举值颜色</p>
                <div
                  v-for="(o, i) in activeData.customFieldList"
                  :key="i"
                  style="margin-bottom: 15px"
                >
                  字段：
                  <el-select v-model="o.customFieldKey" placeholder="请选择">
                    <el-option
                      v-for="item in activeData.meterHeader"
                      :key="item.keyValue"
                      :label="item.nameValue"
                      :value="item.keyValue"
                    >
                    </el-option>
                  </el-select>
                  <div
                    class=""
                    v-for="(n, ind) in o.enumerationList"
                    :key="ind"
                  >
                    <el-input
                      v-model="n.enumerationValue"
                      placeholder="请输入枚举值"
                      style="width: 130px; margin: 10px 10px 0 52px"
                    ></el-input>
                    <!-- <el-input v-model="n.color" placeholder="请输入色号" style="width: 130px"></el-input> -->
                    <el-color-picker
                      v-model="n.color"
                      style="position: relative; top: 11px"
                    ></el-color-picker>
                  </div>
                  <div class="mt-10" style="margin-left: 52px">
                    <el-button
                      @click="addCustomFieldAndColor(i)"
                      icon="el-icon-plus"
                      type="primary"
                    >
                      添加枚举值
                    </el-button>
                    <el-button
                      @click="delCustomFieldAndColor(i)"
                      icon="el-icon-delete"
                      type="danger"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
                <div class="mt-10">
                  <el-button @click="addCustomField" icon="el-icon-plus">
                    添加字段
                  </el-button>
                </div>
              </div>
            </div>
          </template>
          <!-- 新待办事项 -->
          <template v-if="activeData.keyName === 'MyBeDealt'">
            <div>
              <p>数据接口</p>
              <div
                v-for="(o, i) in activeData.tabsNumberList"
                :key="i"
                style="margin-bottom: 10px"
              >
                <el-select
                  style="width: 127px"
                  @change="changeNeedToByApi(i)"
                  v-model="o.selectValue"
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in needToByClass"
                    :key="item.key"
                    :label="item.name"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
                <el-input
                  style="width: 220px; margin-left: 10px"
                  v-model="o.port"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
            <div class="mt-10">
              <el-button @click="addMyBeDealt" icon="el-icon-plus">
                添加选项
              </el-button>
            </div>
          </template>
          <template
            v-if="
              activeData.keyName && activeData.keyName.indexOf('Chart') > -1
            "
          >
            <DataSource
              :value="activeData"
              :typeList="['static', 'dynamic', 'service']"
            ></DataSource>
            <el-form-item
              label="数据设置"
              v-if="activeData.dataType === 'static'"
            >
              <el-button @click="showData(activeData.option)">查看</el-button>
            </el-form-item>
            <!-- <div style="margin-bottom: 15px; text-align: center">
              <el-radio-group
                v-model="activeData.dataType"
                size="small"
                @change="dataTypeChange"
              >
                <el-radio-button label="static">静态数据</el-radio-button>
                <el-radio-button label="dynamic">远端数据</el-radio-button>
                <el-radio-button label="service">服务接口</el-radio-button>
              </el-radio-group>
            </div>
            <el-form-item
              label="数据设置"
              v-if="activeData.dataType === 'static'"
            >
              <el-button @click="showData(activeData.option)">查看</el-button>
            </el-form-item>
            <el-form-item
              label="数据接口"
              v-if="activeData.dataType === 'dynamic'"
            >
              <tree-select
                :options="dataInterfaceOptions"
                v-model="activeData.propsApi"
                placeholder="请选择数据接口"
                lastLevel
                lastLevelKey="categoryId"
                lastLevelValue="1"
                clearable
              />
            </el-form-item>
            <template v-if="activeData.dataType === 'service'">
              <el-form-item label="" class="custom_url_style">
                <el-input
                  placeholder="请输入接口地址"
                  v-model="activeData.interfaceUrl"
                  class="input-with-select"
                >
                  <el-select
                    style="width: 80px"
                    v-model="activeData.customUrlPostType"
                    slot="prepend"
                    placeholder="请选择"
                  >
                    <el-option label="GET" value="GET"></el-option>
                    <el-option label="POST" value="POST"></el-option>
                  </el-select>
                  <el-button slot="append" @click="postFieldChart"
                    >请求</el-button
                  >
                </el-input>
              </el-form-item>
              <el-form-item label="参数设置">
                <el-button @click="requestFocus">查看</el-button>
              </el-form-item>
              <el-form-item label="数据处理">
                <el-button @click="editFunc()">接口数据处理</el-button>
              </el-form-item>
            </template> -->
            <!-- <el-form-item
              label="请求参数"
              v-if="activeData.dataType === 'service'"
            >
              <el-input
                v-model="activeData.requestParam"
                @focus="requestFocus"
                ref="requestParam"
                placeholder="请输入"
              />
            </el-form-item> -->
            <!-- <template v-if="activeData.dataType === 'service'">
              <p>数据组设置</p>
              <div v-for="(o, i) in activeData.dataArrOption" :key="i">
                <el-form-item label="数据字段">
                  <el-input v-model="o.field" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="字段名称">
                  <el-input v-model="o.fieldName" placeholder="请输入" />
                </el-form-item>
              </div>
              <div class="mt-10">
                <el-button @click="addDataArrOption" icon="el-icon-plus">
                  添加选项
                </el-button>
              </div>
            </template> -->
          </template>
        </template>
      </el-form>
    </el-scrollbar>
    <JSONArea v-if="areaVisible" ref="JSONArea" @refresh="updateOption" />
    <form-script
      v-if="formScriptVisible"
      :visible.sync="formScriptVisible"
      :value="activeData.dataProcessing"
      @updateScript="updateScript"
      ref="formScript"
    />
    <!-- <form-script
      v-if="requestParamVisible"
      :visible.sync="requestParamVisible"
      :value="activeData.requestParam"
      @updateScript="updateScriptParam"
      ref="formScriptParam"
    /> -->
    <iconBox
      :visible.sync="iconsVisible"
      :current="current"
      @choiceIcon="setIcon"
    />
    <el-dialog
      :modal-append-to-body="false"
      :append-to-body="false"
      :visible.sync="requestParamVisible"
      v-if="requestParamVisible"
      width="40%"
    >
      <div class="textarea_style">
        <el-input
          type="textarea"
          :rows="7"
          placeholder="请输入内容"
          v-model="activeData.requestParam"
        >
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="requestParamVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureRequestParam">确 定</el-button>
      </span>
    </el-dialog>
  </el-aside>
</template>
<script>
import draggable from "vuedraggable";
import { getSelectorAll } from "@/api/system/menu";
import { getDataInterfaceSelector } from "@/api/systemData/dataInterface";
import iconBox from "@/components/icon-box";
import JSONArea from "./JSONArea";
import FormScript from "./FormScript";
import request from "@/utils/request";
import DataSource from "./DataSource";
const defaultDataHandler =
  "(data) => {\r\n    // 处理数据逻辑\r\n\r\n    // 返回所需的数据\r\n    return data\r\n}";
export default {
  props: ["activeData"],
  components: { draggable, iconBox, JSONArea, FormScript, DataSource },
  data() {
    return {
      formScriptVisible: false,
      requestParamTextarea: "",
      requestParamVisible: false,
      dialogVisible: false,
      iconsVisible: false,
      areaVisible: false,
      currentIndex: 0,
      current: "",
      menuList: [],
      dataInterfaceOptions: [],
      newTabsApi: {
        announcement: "/api/visualdev/Dashboard/Notice",
        email: "/api/visualdev/Dashboard/Email",
        flowTodo: "/api/visualdev/Dashboard/FlowTodo",
        // latestAnnouncement: "/api/visualdev/Dashboard/Notice",
      },
      moduleClass: [
        {
          name: "工作任务",
          key: "workTasks",
        },
        {
          name: "售前支持列表",
          key: "preSalesSupportList",
        },
        {
          name: "巡检任务",
          key: "inspectionTasks",
        },
        {
          name: "报备商机",
          key: "reportingOpportunities",
        },
        {
          name: "项目验收",
          key: "projectAcceptance",
        },
      ],
      moduleApi: {
        workTasks: "/api/crm/CrmWorkitem/getList", //get
        preSalesSupportList: "/api/visit/Beforesalesupportlist/getList", //post
        inspectionTasks: "/api/visit/AfterSalesInspectTask/getList", //post
        reportingOpportunities: "/api/visit/RkProjectReporting/getList", //post
        projectAcceptance: "/api/contract/RkContractProject/getList", //post
      },
      needToByClass: [
        {
          name: "待办事项",
          key: "todo",
        },
        {
          name: "商机待办",
          key: "bisness",
        },
      ],
      tabsApi: {
        // notice: "/api/visualdev/Dashboard/Notice",
        // unread: "/api/visualdev/Dashboard/Email",
        todo: "/api/visualdev/Dashboard/FlowTodo",
        bisness: "/api/crm/CrmCustomerOpportunity/getList",
      },
      searchOptions: [
        {
          label: "时间",
          value: "time",
        },
        {
          label: "时间范围",
          value: "timeRange",
        },
        {
          label: "下拉框",
          value: "select",
        },
      ],
    };
  },
  created() {
    this.getMenuList();
    this.getDataInterfaceSelector();
  },
  mounted() {
    // this.$set(this.activeData, "styleClass", 1);
  },
  methods: {
    // getActiveDataData() {},
    addSearchCondition() {
      if (Array.isArray(this.activeData.searchList)) {
        this.activeData.searchList.push({
          searchType: "",
          searchName: "",
          searchField: "",
        });
      } else {
        this.$set(this.activeData, "searchList", []);
        // this.activeData.searchList = [];
        this.activeData.searchList.push({
          searchType: "",
          searchName: "",
          searchField: "",
        });
      }
      console.log(this.activeData, "======");
    },
    editFunc() {
      console.log(this.activeData.dataProcessing, "----");
      if (!this.activeData.dataProcessing) {
        this.activeData.dataProcessing = defaultDataHandler;
      }
      this.formScriptVisible = true;
      this.$nextTick(() => {
        this.$refs.formScript.onOpen();
      });
    },
    updateScript(data) {
      console.log(data);
      // let handleFn = eval(data);
      // let handleData = handleFn(2);
      // console.log(handleData);
      this.activeData.dataProcessing = data;
    },
    updateScriptParam(data) {
      this.activeData.requestParam = data;
    },
    postFieldChart() {
      request({
        url: this.activeData.interfaceUrl,
        method: this.activeData.customUrlPostType,
        data: this.activeData.requestParam
          ? JSON.parse(this.activeData.requestParam)
          : {},
      }).then((res) => {
        console.log(this.activeData.dataProcessing, "----");
        let handleFn = eval(this.activeData.dataProcessing);
        let handleData = handleFn(res.data);
        console.log(handleData);
        // let xAxisData = [];
        // res.data.forEach((item) => {
        //   xAxisData.push(item.itemDate);
        // });
        // this.activeData.option.xAxis[0].data = xAxisData;
      });
    },
    postField() {
      request({
        url: this.activeData.interfaceUrl,
        method: this.activeData.customUrlPostType,
        data: this.activeData.requestParam
          ? JSON.parse(this.activeData.requestParam)
          : {},
      }).then((res) => {});
    },
    addDataArrOption() {
      let optionArr = JSON.parse(JSON.stringify(this.activeData.dataArrOption));
      let obj = {
        field: "",
        fieldName: "",
      };
      optionArr.push(obj);
      this.$set(this.activeData, "dataArrOption", optionArr);
    },
    requestFocus() {
      let _this = this;
      this.requestParamVisible = true;
      // this.$nextTick(() => {
      //   this.$refs.formScriptParam.onOpen();
      // });
      // this.requestParamTextarea = this.activeData.requestParam;
      // _this.$refs.requestParam.blur();
    },
    sureRequestParam() {
      this.requestParamVisible = false;
      // this.activeData.requestParam = this.requestParamTextarea;
    },
    addParams() {
      this.dialogVisible = true;
    },
    delTable(index) {
      this.activeData.meterHeader.splice(index, 1);
    },
    addMyBeDealt() {
      // this.tabsNumberList.push({
      //   selectValue: '',
      //   port: ''
      // })
      if (!this.activeData.tabsNumberList) {
        this.$set(this.activeData, "tabsNumberList", []);
      }
      for (const key in this.tabsApi) {
        if (
          this.activeData.tabsNumberList.findIndex(
            (item) => item.selectValue == key
          ) == -1
        ) {
          this.activeData.tabsNumberList.push({
            selectValue: key,
            port: this.tabsApi[key],
          });
          return;
        }
      }
    },
    changeNeedToByApi(i) {
      this.activeData.tabsNumberList[i].port =
        this.tabsApi[this.activeData.tabsNumberList[i].selectValue];
      console.log("this.activeData.tabsNumberList[i]", i);
    },
    changeApi(i) {
      if (this.moduleApi[this.activeData.apiName]) {
        this.$set(
          this.activeData,
          "apiUrl",
          this.moduleApi[this.activeData.apiName]
        );
      } else {
        this.$set(this.activeData, "apiUrl", "");
      }
    },
    addCustomFieldAndColor(i) {
      this.activeData.customFieldList[i].enumerationList.push({
        enumerationValue: "",
        color: "",
      });
    },
    delCustomFieldAndColor(index) {
      console.log(index);
      this.activeData.customFieldList.splice(index, 1);
    },
    addCustomField() {
      if (!this.activeData.customFieldList) {
        this.$set(this.activeData, "customFieldList", []);
      }
      this.activeData.customFieldList.push({
        customFieldKey: "",
        enumerationList: [
          {
            enumerationValue: "",
            color: "",
          },
        ],
      });
    },
    addMeterHeader() {
      if (!this.activeData.meterHeader) {
        this.$set(this.activeData, "meterHeader", []);
      }
      this.activeData.meterHeader.push({
        nameValue: "",
        keyValue: "",
        width: "",
      });
    },
    changeTabsListNew() {
      console.log(this.activeData.selectValue, "++++++");
      this.activeData.port = this.newTabsApi[this.activeData.selectValue];
    },
    getMenuList() {
      getSelectorAll({ category: "Web" }).then((res) => {
        this.menuList = res.data.list;
      });
    },
    getDataInterfaceSelector() {
      getDataInterfaceSelector().then((res) => {
        this.dataInterfaceOptions = res.data;
      });
    },
    getSelectValue(data, i) {
      console.log(data, "========");
      if (!data[0]) {
        this.$set(this.activeData.list, i, {
          fullName: "",
          id: "",
          urlAddress: "",
          icon: "",
          iconBackgroundColor: "",
          type: "",
          propertyJson: "",
          linkTarget: "_self",
          enCode: "",
        });
      } else {
        let iconBackgroundColor = "";
        if (data[1].propertyJson) {
          let propertyJson = JSON.parse(data[1].propertyJson);
          iconBackgroundColor = propertyJson.iconBackgroundColor || "";
        }
        this.$set(this.activeData.list, i, {
          fullName: data[1].fullName,
          id: data[1].id,
          urlAddress: data[1].urlAddress,
          type: data[1].type,
          propertyJson: data[1].propertyJson,
          linkTarget: data[1].linkTarget,
          enCode: data[1].enCode,
          icon: data[1].icon,
          parentId: data[1].parentId,
          iconBackgroundColor: iconBackgroundColor,
        });
      }
    },
    addSelectItem() {
      this.activeData.list.push({
        fullName: "",
        id: "",
        urlAddress: "",
        icon: "",
        iconBackgroundColor: "",
        type: "",
        propertyJson: "",
        linkTarget: "_self",
        enCode: "",
      });
    },
    delSelectItem(index) {
      if (this.activeData.list.length < 3) {
        this.$message({
          message: "选项最少要保留两项",
          type: "warning",
        });
        return;
      }
      this.activeData.list.splice(index, 1);
    },
    addDataBoardItem() {
      this.activeData.list.push({
        fullName: "",
        num: "",
        dataType: "static",
        propsApi: "",
        icon: "",
      });
    },
    delDataBoardItem(index) {
      if (this.activeData.list.length < 3) {
        this.$message({
          message: "选项最少要保留两项",
          type: "warning",
        });
        return;
      }
      this.activeData.list.splice(index, 1);
    },
    openIconsDialog(index) {
      this.iconsVisible = true;
      this.currentIndex = index;
      this.current = this.activeData.list[this.currentIndex].icon;
    },
    setIcon(val) {
      this.activeData.list[this.currentIndex].icon = val;
    },
    showData(option) {
      this.areaVisible = true;
      this.$nextTick(() => {
        this.$refs.JSONArea.init(option);
      });
    },
    updateOption(data) {
      let option = data ? JSON.parse(data) : {};
      this.activeData.option = option;
    },
    dataTypeChange() {
      this.activeData.propsApi = "";
      if (this.activeData.dataType == "service") {
        if (
          !this.activeData.dataArrOption ||
          this.activeData.dataArrOption.length == 0
        ) {
          let arr = [
            {
              field: "",
              fieldName: "",
            },
          ];
          this.$set(this.activeData, "dataArrOption", arr);
          // this.activeData.dataArrOption.push();
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.right-box {
  background: #fff;
  border-radius: 4px;
  .cap-wrapper {
    text-align: center;
  }
  >>> .el-scrollbar__view {
    padding: 15px;
  }
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;
    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }
    .el-select {
      flex: 1;
    }
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #606266;
  }
  .dataBoard-item {
    .el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
    .el-divider--horizontal {
      margin: 14px 0;
    }
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .head-icon {
        color: #f56c6c;
      }
    }
  }
  .table_del {
    text-align: center;
    color: #f56c6c;
  }
  .custom_url_style {
    >>> .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
.textarea_style {
  padding: 20px;
}
</style>
